<template>
  <el-carousel
    :interval="4000"
    type="card"
    height="300px"
    :indicator-position="'none'"
    class="carousel-root"
  >
    <el-carousel-item v-for="item in carouselItems" :key="item.id">
      <a :href="item.policyLink" target="_blank" class="carousel-link">
        <div class="carousel-content">
          <img :src="item.image" :alt="item.title" class="carousel-image" />
          <div class="carousel-overlay">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <p class="policy-link-text">
              查看政策详情 <el-icon><Right /></el-icon>
            </p>
          </div>
        </div>
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Right } from '@element-plus/icons-vue'
import axios from 'axios'

const carouselItems = ref([])

const loadCarouselData = async () => {
  try {
    const response = await axios.get(
      'http://localhost:8080/hospital5_war/carousel/findAll',
      { headers: { 'Content-Type': 'application/json' } }
    );
    if (response.data && Array.isArray(response.data)) {
      carouselItems.value = response.data
        .filter(item => item.is_valid === 1)
        .map(item => ({
          id: item.id,
          image: item.img || 'https://picsum.photos/id/237/800/400',
          title: item.title || '政策标题',
          description: item.content || '政策描述',
          policyLink: `#notice-${item.notice_id}` || '#'
        }));
    }
    if (carouselItems.value.length === 0) {
      carouselItems.value = [
        {
          id: 1,
          image: 'https://picsum.photos/id/237/800/400',
          title: '分级诊疗政策',
          description: '建立\"基层首诊、双向转诊\"就医模式，优化医疗资源配置',
          policyLink: 'https://www.gov.cn/zhengce/content/2015-09/11/content_10158.htm'
        },
        {
          id: 2,
          image: 'https://picsum.photos/id/238/800/400',
          title: '智慧医院建设',
          description: '推进\"互联网+医疗健康\"，提升医疗服务智能化水平',
          policyLink: 'https://www.gov.cn/zhengce/zhengceku/2020-05/22/content_5513897.htm'
        },
        {
          id: 3,
          image: 'https://picsum.photos/id/239/800/400',
          title: '电子病历政策',
          description: '规范电子病历管理，实现全流程追踪与跨机构共享',
          policyLink: 'https://www.gov.cn/zhengce/zhengceku/2018-12/31/content_5435418.htm'
        }
      ];
    }
  } catch (error) {
    console.error('轮播图数据加载失败:', error);
    carouselItems.value = [
      {
        id: 1,
        image: 'https://picsum.photos/id/237/800/400',
        title: '分级诊疗政策',
        description: '建立\"基层首诊、双向转诊\"就医模式，优化医疗资源配置',
        policyLink: 'https://www.gov.cn/zhengce/content/2015-09/11/content_10158.htm'
      },
      {
        id: 2,
        image: 'https://picsum.photos/id/238/800/400',
        title: '智慧医院建设',
        description: '推进\"互联网+医疗健康\"，提升医疗服务智能化水平',
        policyLink: 'https://www.gov.cn/zhengce/zhengceku/2020-05/22/content_5513897.htm'
      },
      {
        id: 3,
        image: 'https://picsum.photos/id/239/800/400',
        title: '电子病历政策',
        description: '规范电子病历管理，实现全流程追踪与跨机构共享',
        policyLink: 'https://www.gov.cn/zhengce/zhengceku/2018-12/31/content_5435418.htm'
      }
    ];
  }
}
onMounted(() => {
  loadCarouselData()
})
</script>

<style scoped>
.carousel-root {
  width: 100vw;
  max-width: 100%;
}
.carousel-link {
  display: block;
  height: 100%;
  width: 100%;
}
.carousel-content {
  position: relative;
  height: 100%;
  width: 100%;
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 20px;
  color: white;
  border-radius: 0 0 4px 4px;
}
.carousel-overlay h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  font-weight: 600;
}
.carousel-overlay p {
  margin: 0 0 15px 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}
.policy-link-text {
  display: flex;
  align-items: center;
  font-size: 14px;
  opacity: 0.9;
}
/* 手机端适配 */
@media (max-width: 768px) {
  .carousel-root {
    height: 180px !important;
    min-height: 120px;
  }
  .carousel-image {
    height: 180px !important;
    min-height: 120px;
  }
  .carousel-overlay {
    padding: 10px;
  }
  .carousel-overlay h3 {
    font-size: 15px;
  }
  .carousel-overlay p {
    font-size: 12px;
  }
}
</style>